<template>
  <div >
    <el-tabs v-model="editableTabsValue" :style="{height:tabsHeight}" type="card" closable tab-position="left" @tab-remove="removeTab">
      <el-tab-pane
        :key="key"
        v-for="(item,key) in $slots"
        :label="item[0].componentOptions.propsData.title"
        :name="addCallback(
          item[0].key,
          callbacks[item[0].key] = item[0].componentOptions.propsData.layerId
          )
        "
      >
        <slot :name="item[0].key"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data () {
    return {
      editableTabsValue: '',
      callbacks: {}
    }
  },
  created: function () {
    this.editableTabsValue = this.selected
    // component
    // // 遍历所有默认插槽
    // for(let slot in this.$slots.default){
    //   slot.componentOptions.propsData['name']
    // }
  },
  mounted: function () {
  },
  watch: {
    'selected': function () {
      this.editableTabsValue = this.selected
    }
  },
  computed: {

  },
  methods: {
    addCallback (key, callback) {
      this.callbacks[key] = callback()
      return key
    },
    removeTab (id) {
      // 调用全局状态关闭对应图层
      this.$store.dispatch('changeMapPolygonLayersShow', { group: this.callbacks[id], isShow: false })
    }
  },
  props: [
    'selected',
    'tabsHeight',
    'layerId'
  ]
}
</script>
<style scoped>
  .border{
    padding: 10px 10px 10px 10px;
    border: 0px solid #999999;
    background:#ffffff;
    box-shadow: 0px 1px 2px #999999;
    border-radius: 4px;
  }
</style>
